<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>axios基本使用</title>
</head>
<body>
  
    <div>
      <button onclick="testGet()">GET请求</button>
      <button onclick="testPost()">POST请求</button>
      <button onclick="testPut()">PUT请求</button>
      <button onclick="testDelete()">DELETE请求</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <script>
      axios.defaults.baseURL = 'http://localhost:3000';

      function testGet() {
      /*
      axios({ // 配置对象: 属性名是一些特殊名称
        method: 'GET',
        url: '/posts',
        params: { // 指定query参数,而不是params参数
          id: 2
        }
      })
      */
      axios.get('/posts', {
        params: {
          id: 2
        }
      }).then(
        response => {
          console.log(response.data, response.status, response.statusText)
        },
        error => {
          alert(error.message)
        }
      )
    }

    function testPost() {
      /*
      axios({ // 配置对象: 属性名是一些特殊名称
        method: 'POST',
        url: '/posts',
        data: { // 指定请求头参数数据
          title: 'ccc',
          author: 'ddd'
        }
      })
      */
     axios.post('/posts', {
       title: '针不戳!',
       author: '茄子🍆'
     }).then(
        response => {
          console.log(response.data, response.status, response.statusText)
        },
        error => {
          alert(error.message)
        }
      )
    }

    function testPut() {
      /*
      axios({ // 配置对象: 属性名是一些特殊名称
        method: 'PUT',
        url: '/posts/6',
        data: { // 指定请求头参数数据
          title: '经济金融',
          author: '王博文'
        }
      })
      */
     axios.put('/posts/11', {
       title: '一炮四个PDD',
       author: 'PDD🐷'
     })
      .then(
        response => {
          console.log(response.data, response.status, response.statusText)
        },
        error => {
          alert(error.message)
        }
      )
    }

    function testDelete() {
      // axios({ // 配置对象: 属性名是一些特殊名称
      //   method: 'DELETE',
      //   url: '/posts/6',
      // })
      axios.delete('/posts/7')
      .then(
        response => {
          console.log(response.data, response.status, response.statusText)
        },
        error => {
          alert(error.message)
        }
      )
    }
    </script>
</body>
</html>